<template>
  <div class="content">
    <dc-header :title="'门店切换'" :icon="'icon-header-back'"></dc-header>
    <div class="head-top">
      <div class="search-box">
        <router-link :to="{path:'/searchJurShop', query:{phone: phone}}">
          <div class="search-content bg-white">
            <i class="iconfont icon-ic_sousuo"></i>
            搜索门店
          </div>
        </router-link>
      </div>
    </div>
    <dc-row class="item" type="flex" justify="start">
      <dc-col span="10" class="left-list">
        <!--<div data-id='0' @click="togglelist" class="rightcell mix1px"-->
        <!--v-bind:class="{'active' : leftlisttoggleType == 0}">-->
        <!--全部门店-->
        <!--</div>-->
        <div data-id='0' class="rightcell mix1px"
             v-bind:class="{'active' : leftlisttoggleType == 0}">
          <span>全部门店</span>
        </div>
        <!--<div>-->
        <!--<div data-id='1' @click="togglelist" v-bind:class="{'active' : leftlisttoggleType == 1}"-->
        <!--class="rightcell mix1px">-->
        <!--经营模式-->
        <!--<i class="iconfont"-->
        <!--v-bind:class="{'icon-right': !(leftlisttoggleType == 1),'icon-down': leftlisttoggleType == 1}"></i>-->
        <!--</div>-->
        <!--<div v-if="leftlisttoggleType == 1">-->
        <!--<div class="left-list-itembox" v-for="(item, index ) in businessModelList" :key="item.businessModelCode"-->
        <!--@click="getList(item.businessModelName, item, businessModelList, {'businessModelCode': item.businessModelCode})">-->
        <!--<span-->
        <!--v-bind:class="{'active' : item.active}">{{item.businessModelName}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
        <!--<div>-->
        <!--<div data-id='2' @click="togglelist" v-bind:class="{'active' : leftlisttoggleType == 2}"-->
        <!--class="rightcell mix1px">-->
        <!--城市-->
        <!--<i class="iconfont"-->
        <!--v-bind:class="{'icon-right': !(leftlisttoggleType == 2),'icon-down': leftlisttoggleType == 2}"></i>-->
        <!--</div>-->
        <!--<div v-if="leftlisttoggleType == 2">-->
        <!--<div class="left-list-itembox" v-for="item in cityList" :key="item.cityCode" @click="getList(item.cityName, item, cityList, {'cityCode': item.cityCode})">-->
        <!--<span v-bind:class="{'active' : item.active}">{{item.cityName}}</span>-->
        <!--</div>-->
        <!--</div>-->
        <!--</div>-->
      </dc-col>
      <dc-col span="14" class="right-list content-body">
        <div class="rightcell active">
          <span>全部{{region}}门店</span>
          <span class="iconselect" @click ='selectAllToggle'>全选
            <i style='color: #ff6f43' class="iconfont icon-checkbox-selected" v-show="!checkAll"></i>
            <i class="iconfont icon-checkbox-unselect" v-show="checkAll"></i>
          </span>
        </div>
        <div :key="itemer.storeCode" v-for="(itemer, index) in storeList" class="rightcell"
             v-bind:class="{'active' : itemer.active}"  @click = 'activeToggle(index)'>
          {{itemer.storeName}}
          <span class="iconselect">
            <i style='color: #333' v-show="itemer.selectedFlag === 0" class="iconfont icon-checkbox-unselect"></i>
            <i style='color: #ff6f43' v-show="itemer.selectedFlag === 1" class="iconfont icon-checkbox-selected"></i>
          </span>
        </div>
      </dc-col>
    </dc-row>
  </div>
</template>
<script>
  //  import Vue from 'vue';
  import header from '@/common/plugins/header';
  import {col, row} from '@/common/Flex';
  //  import {mapMutations} from 'vuex';
  import mintUi from '@/common/mintUi';
  import api from '../../common/api/shopAlter';
  /**
   * shopAlter
   * @namespace components/shop/jurisdictionshop
   * @description 门店权限点击搜索的搜索页面
   */
  export default {
    data () {
      return {
        businessModelList: [],
        cityList: [],
        storeList: [],
        leftlisttoggleType: 0,
        region: '',
        phone: '',
        minNum: 0
      };
    },
    activated () {
      this.phone = this.$route.query.phone;
      this.getShopAlterListAPI(this.phone);
    },
    computed: {
      checkAll () {
        this.minNum = this.storeList.filter(v => v.selectedFlag === 0).length;
        if (this.storeList.length === 0) {
          return true;
        } else {
          return this.minNum !== 0;
        }
      }
    },
    methods: {
      //初始化全部门店api
      getShopAlterListAPI (phone) {
        let groupCode = JSON.parse(sessionStorage.getItem('store')).groupCode;
        api.permissionsList(phone, groupCode).then(res => {
          this.storeList = res.storeList || [];
        });
      },
      activeToggle (idx) {
        if (this.storeList.filter(v => v.selectedFlag === 1).length === 1 && this.storeList[idx].selectedFlag === 1) {
          mintUi.openToast('至少保留一家门店');
          return;
        }
        this.storeList[idx].selectedFlag = this.storeList[idx].selectedFlag === 0 ? 1 : 0;
        let newStoreList = this.storeList.filter(val => {
          return val.selectedFlag === 1;
        }).map(val => {
          return val.storeCode;
        });
        let data = {
          storeCodes: newStoreList,
          phone: this.phone
        };
        api.allowedToAccess(data).then(res => {
          mintUi.openToast('保存成功');
        });
      },
      selectAllToggle () {
        if (this.checkAll) {
          let newstoreCodes = this.storeList.map(val => val.storeCode);
          api.allowedToAccess({'storeCodes': newstoreCodes, 'phone': this.phone}).then(res => {
            this.storeList = this.storeList.map(val => {
              val.selectedFlag = 1;
              return val;
            });
            mintUi.openToast('保存成功');
          });
        } else {
          let newstoreCode = this.storeList && [this.storeList[0].storeCode];
          api.allowedToAccess({'storeCodes': newstoreCode, 'phone': this.phone}).then(res => {
            this.storeList = this.storeList.map((val, idx) => {
              if (idx === 0) {
                val.selectedFlag = 1;
              } else {
                val.selectedFlag = 0;
              }
              return val;
            });
            mintUi.openToast('保存成功');
          });
        }
      }
    },
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .item {
    font-size: px2rem(30px);
    text-align: left;
    height: calc(100% - 94px);
    color: #333;
  }

  .left-list {
    overflow-y: auto;
    position: absolute;
    /*bottom: 0;*/
    height: calc(100%);
    top: px2rem(0px);
    //left: 0;
  }

  .right-list {
    @extend .left-list;
    right: 0;
    background: #fff;

  }

  .rightcell {
    position: relative;
    line-height: px2rem(100px);
    padding: 0 px2rem(48px) 0 px2rem(24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: px2rem(100px);
    font-size: px2rem(26px);
    &:before {
      background-color: #e6e6e6;
    }
    i.icon-right, i.icon-down {
      color: #999;
      float: right;
    }
  }

  .left-list-itembox {
    padding-left: px2rem(40px);
    background: #fff;
    line-height: px2rem(100px);
  }

  .active {
    background: #fff;
    color: $theme-color;
    &:before {
      background-color: #fff;
    }
  }

  .search-box {
    width: 100%;
    box-sizing: border-box;
    height: px2rem(100px);
    padding: px2rem(15px) px2rem(24px);
    color: #999;
    font-size: px2rem(28px);
    background: #f2f2f2;
    .search-content {
      border-radius: 4px;
      text-align: center;
      line-height: px2rem(64px);
    }
  }

  .iconselect {
    position: absolute;
    right: px2rem(24px);
    color: #333;
    i {
      font-size: px2rem(26px);
    }
  }
</style>


